<template>
	<view class="form-container">
		<u-sticky>
            <view style="background: #fff;">
                <view class="flex-center margin-bottom-10">
                    <view class="flex-center margin-bottom-10">
                        <view class="machine-title">
                            <view class="item-gap">
                                <u-icon name="tags" color="#fff" size="22"></u-icon>
                            </view>
                            <view>{{ruleForm.machineName}}</view>
                        </view>
                    </view>
                </view>
                <u-subsection :list="tabList" :current="activeTab" model="button" fontSize="18" @change="onTabChange"></u-subsection>
            </view>
		</u-sticky>
		<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="180px" ref="ruleForm" :labelStyle="{height: '64rpx',fontSize: '28rpx'}">
			<!-- 仪表信息 -->
			<u-form-item v-if="activeTab === 0" label="了机时间" labelWidth="120px" prop="machineName" borderBottom
				ref="item1">
				<view style="color: #2d8cf0;" class="flex-end-center font-size-16 width-100-percentage" @click="onUpdateTime">
					<view class="item-gap">{{ ruleForm.endSystemTime }}</view>
				</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="了机班次" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.endScheduleShiftName }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="锭数" borderBottom ref="item1">
				<u-input v-model="ruleForm.openSpinCount" color="#2d8cf0" fontSize="32rpx" inputAlign="right" type="number" placeholder="锭数" border="surround"></u-input>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="开台产量表数" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.startOutput }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="了机产量表数" borderBottom ref="item1">
				<u-input v-model="ruleForm.endOutput" color="#2d8cf0" fontSize="32rpx" inputAlign="right" type="number" placeholder="了机产量表数" border="surround"></u-input>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="开台能耗表数" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.startElectricEnergy }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 0" label="了机能耗表数" borderBottom ref="item1">
				<u-input v-model="ruleForm.endElectricEnergy" color="#2d8cf0" fontSize="32rpx" inputAlign="right" type="number" placeholder="了机能耗表数" border="surround"></u-input>
			</u-form-item>
			<!-- 排产信息 -->
			<u-form-item v-if="activeTab === 1" label="了机产品" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.productName }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 1" label="生产批号" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage width-100-percentage">{{ ruleForm.batchCode }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 1" label="排产数量" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.productionQty }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 1" label="通知单号" labelWidth="100px" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.prdNoticeCode }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 1" label="所属工序" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.processName }}</view>
			</u-form-item>
			<u-form-item v-if="activeTab === 1" label="所属车间" borderBottom ref="item1">
				<view class="text-right font-size-16 width-100-percentage">{{ ruleForm.workshopName }}</view>
			</u-form-item>
		</u-form>
		<view>
			<u-button @click="onConfirmBtn" color="#2d8cf0" :loading="confirmLoading" size="large">确定</u-button>
		</view>

		<u-datetime-picker v-model="selectDateTime" :show="selectDateTimePickerState" :closeOnClickOverlay="true"
			mode="datetime" @confirm="onConfirmBtnOfSelectPicker" @close="onCloseBtnOfSelectPicker"
			@cancel="onCloseBtnOfSelectPicker"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		productionPrdNoticeMachineChangeGet,
		productionPrdNoticeMachineChangeGetMachineData,
		productionPrdNoticeMachineCloseClose,
		workforcemanagementScheduleShiftByTime
	} from "../../../api";
	import {
		formatTime,
		showLoading,
		tipBar
	} from "../../../utils/jk-utils";
	import jkPopup from '../../../jk-components/jk-popup';
	export default {
		components: {
			jkPopup
		},
		data() {
			return {
				selectDateTime: '',
				selectDateTimePickerState: false,
				confirmLoading: false,
				activeTab: 0,
				tabList: ['仪表信息', '排产信息'],
				dataId: null,
				ruleForm: {
					endSystemTime: '',
					machineCode: '',
					workshopId: null,
					workshopName: '',
					processId: null,
					processName: '',
					startState: 0,
                    productName: '',
                    prdNoticeCode: '',
                    productionQty: 0
				},
				rules: {
					machineName: {
						type: 'string',
						required: true,
						message: '请填写设备',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(e) {
			this.dataId = e.id;
		},
		onShow() {
			this.getDependentData();
		},
		methods: {
			onUpdateTime() {
				this.selectDateTimePickerState = true;
			},
			onCloseBtnOfSelectPicker() {
				this.selectDateTimePickerState = false;
			},
			onConfirmBtnOfSelectPicker(e) {
				this.$set(this.ruleForm, 'endSystemTime', formatTime(e.value));
				this.selectDateTimePickerState = false;
				this.getGatherMachineDataRequest();
				this.getScheduleShiftForTimeRequest();
			},
			onConfirmBtn() {
				this.confirmLoading = true;
				this.ruleForm.prdNoticeMachineChangeId = this.dataId;
				const params = {
					'endElectricEnergy': this.ruleForm.endElectricEnergy,
					'endOutput': this.ruleForm.endOutput,
					'endScheduleShiftId': this.ruleForm.endScheduleShiftId,
					'endSystemElectricEnergy': this.ruleForm.endSystemElectricEnergy,
					'endSystemOutput': this.ruleForm.endSystemOutput,
					'endSystemTime': this.ruleForm.endSystemTime,
					'prdNoticeMachineChangeId': this.ruleForm.prdNoticeMachineChangeId
				};
				productionPrdNoticeMachineCloseClose(params).then(res => {
					this.confirmLoading = false;
					if (res.data.status === 200) {
						uni.navigateBack({
							delta: 1
						});
						tipBar('save');
					}
				})
			},
			onTabChange(e) {
				this.activeTab = e;
			},
			getScheduleShiftForTimeRequest() {
				if (this.ruleForm.workshopId && this.ruleForm.endSystemTime) {
					return workforcemanagementScheduleShiftByTime({
						startTime: formatTime(this.ruleForm.endSystemTime),
						workshopId: this.ruleForm.workshopId
					}).then(res => {
						if (res.data.status === 200) {
							let resData = res.data.res || {};
							this.$set(this.ruleForm, 'endScheduleShiftId', resData.shiftId);
							this.$set(this.ruleForm, 'endScheduleShiftName', resData.shiftName);
						}
					});
				}
			},
			// 获取指定机台采集的仪表数据
			getGatherMachineDataRequest() {
				if (this.ruleForm.machineId && this.ruleForm.machineCode) {
					return productionPrdNoticeMachineChangeGetMachineData({
						machineId: this.ruleForm.machineId,
						machineCode: this.ruleForm.machineCode,
						selectDateTime: this.ruleForm.endSystemTime
					}).then(res => {
						if (res.data.status === 200) {
							this.$set(this.ruleForm, 'reportElectricEnergy', res.data.res.reportElectricEnergy);
							this.$set(this.ruleForm, 'reportOutput', res.data.res.reportOutput);
							this.$set(this.ruleForm, 'reportQty', res.data.res.reportQty);
							// 开台能耗表数，默认等于采集到的实时能耗
							this.$set(this.ruleForm, 'endElectricEnergy', res.data.res.currentElectricEnergy);
							this.$set(this.ruleForm, 'endSystemElectricEnergy', res.data.res
							.currentElectricEnergy);
							// 开台产量表数，默认等于采集到的实时产量
							this.$set(this.ruleForm, 'endOutput', res.data.res.currentOutput);
							this.$set(this.ruleForm, 'endSystemOutput', res.data.res.currentOutput);
						}
					});
				}
			},
			async getDependentData() {
				showLoading(true);
				if (this.dataId) await this.getDetailRequest();
				this.selectDateTime = formatTime(Date.now());
				this.$set(this.ruleForm, 'endSystemTime', formatTime(Date.now()));
				await this.getScheduleShiftForTimeRequest();
				await this.getGatherMachineDataRequest();
				showLoading(false);
			},
			getDetailRequest() {
				showLoading(true);
				return productionPrdNoticeMachineChangeGet({
					id: this.dataId
				}).then(res => {
					showLoading(false);
					if (res.data.status === 200) {
						this.ruleForm = res.data.res;
					}
				})
			}
		}
	}
</script>

<style>

</style>
<style lang="scss" scoped>
	.machine-title {
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 12rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		background: #2d8cf0;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		margin: 10rpx;
	}

	.form-container {
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
	}

	.popup-content-box {
		padding: 32rpx;

		.popup-content-box-title {
			font-size: 34rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>
